<template>
  <div class="member__details" v-loading="loading">
    <div style="margin-bottom: 20px;">
      <span>账户余额：{{rechargeAmount}} 元</span>
      <span class="duration">累计停车时长：{{parkDuration}} 小时</span>
      <span>累计充值金额：{{sumRechargeAmount}} 元</span>
    </div>
    <el-table border :data="tableData">
      <el-table-column label="绑定车牌" prop="carNum" align="center"></el-table-column>
      <el-table-column label="停车时长(时)" prop="parkDuration" align="center"></el-table-column>
      <el-table-column label="卡类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.cardType | typeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="月租服务余额(天)" prop="monthDay" align="center"></el-table-column>
      <el-table-column label="月租服务车场" prop="parkName" align="center"></el-table-column>
    </el-table>

    <div>
      <el-table border :data="vipData" style=" margin-top: 20px;">
        <!-- <el-table-column label="昵称" prop="nickname" align="center"></el-table-column> -->
        <el-table-column label="卡类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.cardType | typeFilter}}
          </template>
        </el-table-column>
        <el-table-column label="车牌号" prop="carNum" align="center"></el-table-column>
        <el-table-column label="订单号" prop="orderCode" align="center"></el-table-column>
        <el-table-column label="金额" prop="paidAmount" align="center"></el-table-column>
        <el-table-column label="购买时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="卡开始时间" prop="beginTime" align="center"></el-table-column>
        <el-table-column label="卡结束时间" prop="expireTime" align="center"></el-table-column>
      </el-table>

      <el-pagination
        :current-page="searchForm.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top: 12px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>



  </div>
</template>

<script>
  export default {
    name: 'member__details',
    props: ['id'],
    filters: {
      typeFilter(type) {
        switch(type) {
          case "1":
            return '普通月租卡';
          case "2":
            return '定制卡';
          case "3":
            return '时长卡';
          case "4":
            return '充值';
          case "100":
            return '白天卡';
          case "110": 
            return '夜间卡'
        }
      }
    },
    data() {
      return {
        loading: true,
        tableData: [],
        rechargeAmount: 0,
        parkDuration: 0,
        sumRechargeAmount: 0,
        searchForm: {
          pageNum: 1,
          pageSize: 10
        },
        vipData: [],
        total: 0
      }
    },
    mounted() {
      this.searchForm.customerId = this.id;
      this.getAccountDetails();
      this.getCustomerVipRecordPage();
    },
    methods: {
      getAccountDetails() {
        this.$axios({
          method: 'post',
          url: '/customer/info/getAccountDetails',
          data: this.$qs.stringify({ customerId : this.id })
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.carAmount;
            this.rechargeAmount = res.data.rechargeAmount;
            this.parkDuration = res.data.parkDuration;
            this.sumRechargeAmount = res.data.sumRechargeAmount;
            this.loading = false;
          } else {
            return false
          }
        })
      },

      getCustomerVipRecordPage() {
        this.$axios({
          method: 'get',
          url: '/customer/card-record/getCustomerVipRecordPage',
          params: this.searchForm
        }).then((res) => {
          console.log(3344,res)
          if(res.code == 200) {
            this.vipData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getCustomerVipRecordPage();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.pageNum = val;
        this.getCustomerVipRecordPage();
      }
    }
  }
</script>

<style scoped>
  .duration {
    padding: 0 20px;
    margin: 0 20px;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
  }


</style>
